<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
   <script type="text/javascript" src="js/pageToc.js"></script>
   <script type="text/javascript" src="js/sh/scripts/shCore.js"></script>
   <script type="text/javascript" src="js/sh/scripts/shBrushJScript.js"></script>
   <script type="text/javascript" src="js/sh/scripts/shBrushPhp.js"></script>
   <script type="text/javascript" src="js/sh/scripts/shBrushPlain.js"></script>
   <script type="text/javascript" src="js/sh/scripts/shBrushXml.js"></script>
   <link type="text/css" rel="stylesheet" href="js/sh/styles/shCore.css"/>
   <link type="text/css" rel="stylesheet" href="js/sh/styles/shThemeDefault.css"/>
   <script type="text/javascript">
   		SyntaxHighlighter.config.clipboardSwf = 'js/sh/scripts/clipboard.swf';
   		SyntaxHighlighter.all();
   </script>
   <title>PushButton Engine Lesson #1 - Setup using Adobe Flash CS4</title>
</head>
<body>

   <h1>PushButton Engine Lesson #1 - Setup using Adobe Flash CS4</h1>
   
   <p>Welcome, in this tutorial you will learn how to use the PushButton Engine with Adobe Flash CS4.</p>
   
   <div id="pageToc"></div>

   <div id="contentArea">

   <h2>Lesson Requirements</h2>
   <p>To complete this lesson you will need to download and install a few pieces of software.
   <ul>
        <li>Adobe Flash CS4 - <a href="http://www.adobe.com/products/flash/">Download</a>
        <li>PushButton Engine - <a href="http://www.pushbuttonengine.com/download/">Download</a> - To install just extract to your development folder.</li>
   </ul>
   </p>
   
   <h2>Setting up Adobe Flash CS4</h2>
   <p>After installing Adobe Flash CS4 you will need to point it to either the PushButton Engine source code or the pre-built PushButton Engine library.<br/>
      To accomplish this click Edit->Preferences. In the preferences dialog click ActionScript in the catagory list box.
   </p>
   
   <img src="images/Lesson1FlashCS4_2.png" width="700px" />
   
   <p>In the ActionScript preferences you should see a language: section at the bottom. Click the ActionScript 3.0 settings button.
   </p>
   
   <img src="images/Lesson1FlashCS4_3.png" width="700px" />
   
   <p>Now it's time to ask yourself a question. "Will I be modifying the PushButton Engine source code?"<br/>
      If you want to edit the source code along with your project then you will need to add the PushButton Engine /src folder
      to the source path.
   </p>
   
   <img src="images/Lesson1FlashCS4_3A.png" width="700px" />
   
   <p>If you do not care about editing the PushButton Engine source code and just want use the engine as is.<br/>
      You will need to add the PushButton Engine bin folder to the library path.
   </p>
   
   <img src="images/Lesson1FlashCS4_3B.png" width="700px" />
   
   <h2>Creating a new Project</h2>
   <p>Everything in the PushButton Engine is based on ActionScript 3.0 so you will need to use flash file (ActionScript 3.0).
      Click File->New and flash file (ActionScript 3.0).
   </p>
  
   <img src="images/Lesson1FlashCS4_1.png" width="700px" />
   
   <h2>Timeline or Document Class</h2>
   <p>Before we begin coding you have another decision to make. <br />
      "Do I want to use proper object oriented programming with a document class or do I just want to code on the timeline?" <br />
      If you want to use proper OOP click <a href="#document">document class</a> else click <a href="#timeline">timeline section</a> to move on.
   </p>
   
   <h2 id="timeline">Timeline</h2>
   <p>To begin coding on the timeline, select the first frame in the timeline by left clicking and select Window->Actions in the menubar.<br/>
      This brings up the actions script window. Click <a href="#hello">hello world</a> to move on.
   </p>
   
   <h2 id="document">Document Class</h2>
   <p>We now need to setup a document class for our movie. To do this click File->Publish Settings and select the Flash Tab.
   </p>
   
   <img src="images/Lesson1FlashCS4_4.png" width="700px" />
   
   <p>In the script section click the settings button and type Lesson1FlashCS4 in the document class  text box.
   </p>
   
   <img src="images/Lesson1FlashCS4_4A.png" width="700px" />
   
   <p>Now when we run our Flash CS4 movie it will look for a class called Lesson1FlashCS4 in Lesson1FlashCS4.as.<br/>
      Let's create that file now by clicking File->New, select ActionScript file and click ok. Go ahead and save the file as Lesson1FlashCS4.as.
   </p>
   
   <h2 id="hello">Hello, World!</h2>
   <p>That's right, it's time for some code!<br/>
      Copy and paste the below code into your Lesson1FlashCS4.as file and save it.
   </p>
   
   <pre class="brush: js">
    package
    {
	    import flash.display.Sprite;
	    import com.pblabs.engine.PBE;
	    import com.pblabs.engine.debug.Logger;
	
	    public class Lesson1FlashCS4 extends Sprite
	    {
		    public function Lesson1FlashCS4():void
		    {
			    PBE.startup(this);
			    Logger.print(this, "Hello, World!");
		    }
	    }
    }
   </pre>
   
   <p>The above code is basically the minimal application for the PushButton Engine.<br/>
      When executed it prints the below message in the Adobe Flash CS4 Output Window.
   </p>
   <pre class="brush: plain">
	   INFO: Lesson1FlashCS4_fla.MainTimeline - Hello, World!
   </pre>
   
   <p>Let's build the project and test it now. Click Control->Test Movie. This will build our application <br/>
      and if we didn't make any mistakes a window should pop up and you should be greeted with a message in the Adobe Flash CS4 output window.
   </p>
   
   <img src="images/Lesson1FlashCS4_6.png" width="700px" />
   
   <h2>Review</h2>
   <p>To summarize the steps of using the PushButton Engine with Adobe Flash CS4.
    <ul>
        <li>Setup your source path or library path.</li>
        <li>Create a new flash file(ActionScript 3.0)</li>
        <li>Setup the document class</li>
        <li>Create an ActionScript file for the document class</li>
    </ul>
      And that's all there is to it!
   </p>
   
   <h2>Conclusion</h2>
   <p>Congratulations! You just completed lesson #1, creating a flash file using the PushButton Engine.
   </p>
   <p>This can be used as a base for lesson #2 or any future projects of your own.
   </p>
   <p>You can download the completed project source files for this project below.
   </p>
   
   <a href="downloads/Lesson1FlashCS4.zip">Lesson1FlashCS4.zip</a>
   
   </div>
</body>
</html>